<template>
    <div class="rich-text-editor">
        <md-editor v-model="content" :toolbars="toolbars" :language="language" :placeholder="placeholder"
            :height="height" @onUploadImg="onUploadImg" />
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import { getToken } from "@/utils/auth"; // 引入获取token的方法
import { ElMessage } from 'element-plus'; // 引入Element Plus的消息组件

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    },
    language: {
        type: String,
        default: 'zh-CN'
    },
    placeholder: {
        type: String,
        default: '请输入内容...'
    },
    height: {
        type: Number,
        default: 500
    },
    // 自定义上传API路径
    uploadUrl: {
        type: String,
        default: '/common/upload' // 根据若依的API路径调整
    }
});

const emit = defineEmits(['update:modelValue', 'change']);

// 编辑器内容
const content = ref(props.modelValue);

// 工具栏配置
const toolbars = [
    'bold', 'underline', 'italic', 'strikeThrough',
    '-',
    'title', 'sub', 'sup',
    '-',
    'quote', 'unorderedList', 'orderedList',
    '-',
    'codeRow', 'code', 'link', 'image',
    '-',
    'table', 'revoke', 'next',
    '-',
    'pageFullscreen', 'fullscreen', 'preview',
    '-',
    'save'
];

// 监听父组件传入的值变化
watch(() => props.modelValue, (newVal) => {
    if (newVal !== content.value) {
        content.value = newVal;
    }
});

// 监听编辑器内容变化
watch(() => content.value, (newVal) => {
    emit('update:modelValue', newVal);
    emit('change', newVal);
});

/**
 * 图片上传处理函数
 * @param {Array} files 文件列表
 * @param {Function} callback 回调函数，用于将图片URL插入编辑器
 */
const onUploadImg = async (files, callback) => {
    const baseUrl = import.meta.env.VITE_APP_BASE_API || process.env.VUE_APP_BASE_API;
    const uploadUrl = baseUrl + props.uploadUrl;

    try {
        const uploadPromises = [];

        // 为每个文件创建FormData并上传
        for (let file of files) {
            uploadPromises.push(
                new Promise((resolve) => {
                    const formData = new FormData();
                    formData.append('file', file);

                    // 使用fetch API进行上传，附带token认证
                    fetch(uploadUrl, {
                        method: 'POST',
                        headers: {
                            'Authorization': 'Bearer ' + getToken()
                        },
                        body: formData
                    })
                        .then(response => response.json())
                        .then(res => {
                            // 根据若依系统的响应格式调整
                            if (res.code === 200) {
                                // 若依系统返回的url可能在data中，或直接在url字段中
                                const fileUrl = res.url || res.fileName || (res.data && (res.data.url || res.data.fileName));
                                if (fileUrl) {
                                    // 确保URL是完整的
                                    const fullUrl = fileUrl.startsWith('http') ? fileUrl : baseUrl + fileUrl;
                                    resolve(fullUrl);
                                } else {
                                    ElMessage.error('上传成功但未获取到图片地址');
                                    resolve('');
                                }
                            } else {
                                ElMessage.error(res.msg || '图片上传失败');
                                resolve('');
                            }
                        })
                        .catch(error => {
                            console.error('上传图片出错:', error);
                            ElMessage.error('网络错误，上传失败');
                            resolve('');
                        });
                })
            );
        }

        // 等待所有上传完成
        const urls = await Promise.all(uploadPromises);

        // 过滤掉空URL并传给回调函数
        const validUrls = urls.filter(url => url);
        if (validUrls.length > 0) {
            callback(validUrls);
        } else {
            ElMessage.warning('没有图片上传成功');
        }
    } catch (error) {
        console.error('图片上传过程出错:', error);
        ElMessage.error('图片上传失败');
    }
};
</script>

<style scoped>
.rich-text-editor {
    width: 100%;
}
</style>